import React from 'react';
import { connect } from 'dva';
import { List, Picker } from 'antd-mobile';
import moment from 'moment';
import _ from 'lodash';
import { fetchBranchList } from '../../services/statService';

class FilterControl extends React.Component {

  state = {
    branchList: [],
    monthList: [],
    changeALL: false,
  }

  componentWillMount() {
    if (!this.props.stat.monthList.length) {
      const monthList = [];
      for (let i = 0; i <= 12; i++) {
        const a = moment().subtract(i, 'month').startOf('month').utc(true).toISOString();
        const b = moment(a).format('YYYY-MM');
        const o = {
          label: b,
          value: a,
        };
        monthList.push(o);
      }
      this.props.dispatch({ type: 'stat/saveMonthList', payload: monthList });
      this.monthListFormat(monthList);
    } else {
      this.monthListFormat(this.props.stat.monthList);
    }

    this.fetchBranchList();
  }

  branchListFormat = (data) => {
    let branchList = [];
    branchList = data.map((v) => {
      return { label: v.branch_name, value: v.branch_no };
    });
    branchList.unshift({ label: '全部', value: '全部' });
    this.setState({
      branchList,
    });

    if (!this.props.stat.branchPickerValue.length) {
      this.props.dispatch({ type: 'stat/saveBranchPickerValue', payload: ["全部", this.props.stat.monthList[0].value] });
    }
  }

  monthListFormat = (monthList) => {
    if (this.props.showDateAll && monthList && monthList.length===0) {
      monthList.unshift({
        label: '全部',
        value: '全部',
      });
    }
    this.setState({
      monthList,
    });
  }

  fetchBranchList = () => {
    let branchList;
    if (!this.props.stat.branchList.length) {
      const { shopId, roles, branchId } = this.props.auth.currentUser;
      const role = roles[roles.length - 1];
      if (_.includes(['supervisor'], role)) {
        fetchBranchList(shopId, branchId).then((data) => {
          branchList = data.data;
          this.props.dispatch({ type: 'stat/saveBranchList', payload: branchList });
          this.branchListFormat(branchList);
        });
      } else {
        fetchBranchList(shopId).then((data) => {
          branchList = data.data;
          this.props.dispatch({ type: 'stat/saveBranchList', payload: branchList });
          this.branchListFormat(branchList);
        });
      }
    } else {
      branchList = this.props.stat.branchList;
      this.branchListFormat(branchList);
    }
  }

  pickerChange = (v) => {
    const { branchPickerValue, branchList, monthList } = this.props.stat;
    if (this.props.hidePickerDate) {
      v[1] = branchPickerValue[1] || monthList[0].value;
    } else if (this.props.hidePickerBranch) {
      v[1] = v[0];
      v[0] = branchPickerValue[0] || '全部';
    }

    this.props.filterControlsChange(v);

    if (v[1] === '全部') {
      this.setState({
        changeALL: true,
      });
      this.props.dispatch({ type: 'stat/saveBranchPickerValue', payload: [v[0], branchPickerValue[1]] });
    } else {
      this.props.dispatch({ type: 'stat/saveBranchPickerValue', payload: v });
      this.setState({
        changeALL: false,
      });
    }
  }

  render() {
    const { monthList, branchList, changeALL } = this.state;
    const { branchPickerValue } = this.props.stat;

    const value = [...branchPickerValue];
    if (changeALL && this.props.showDateAll) {
      value[1] = '全部';
    }

    const roles = this.props.auth.currentUser.roles;

    if (!(_.includes(roles, 'boss') || _.includes(roles, 'operator') || _.includes(roles, 'supervisor') || _.includes(roles, 'manager')) && !this.props.hidePickerBranch) {
      return null;
    }

    if (this.props.hidePickerDate) {
      return (
        <Picker
          data={[branchList]}
          title="选择门店"
          cascade={false}
          extra="请选择"
          value={branchPickerValue[0] ? [branchPickerValue[0]] : []}
          onChange={this.pickerChange}
        >
          <List.Item arrow="horizontal">选择分店</List.Item>
        </Picker>
      );
    } else if (this.props.hidePickerBranch) {
      return (
        <Picker
          data={[monthList]}
          title="选择月份"
          cascade={false}
          extra="请选择"
          value={branchPickerValue[1] ? [branchPickerValue[1]] : []}
          onChange={this.pickerChange}
        >
          <List.Item arrow="horizontal">选择月份</List.Item>
        </Picker>
      );
    } else {
      return (
        <Picker
          data={[branchList, monthList]}
          title="选择门店，月份"
          cascade={false}
          extra="请选择"
          value={value}
          onChange={this.pickerChange}
        >
          <List.Item arrow="horizontal">选择分店，月份</List.Item>
        </Picker>
      );
    }
  }

}

function mapStateToProps({ stat, auth }) {
  return { stat, auth };
}

export default connect(mapStateToProps)(FilterControl);
